<template>
	<view>
		<view class="ld">
			<view class="left">
				<scroll-view :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="clickToId" :style="{ height: windowHeight }">
					<view v-for="(item, index) in list" :key="index">
						<view :class="['title', { active: index === currentNum, inactive: index !== currentNum}]" :id="'to' + index" @click="setId(index)">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
			<view class="right">
				<scroll-view :scroll-into-view="clickId" @scroll="scroll" :scroll-with-animation="true" :scroll-y="true" :style="{ height: windowHeight }">
					<view v-for="(item, index) in list" :key="index">
						<view class="title,right_title" :id="'po' + index">{{ item.title }}</view>
						<view v-for="(it, idx) in item.list" :key="idx">
							<text class="item">{{ it }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					title: '1号楼',
					list: ['盖饭1', '大白菜1', '土豆1', '西红柿1', '辣椒1']
				},
				{
					title: '2号楼',
					list: ['盖饭2', '大白菜2', '土豆2', '西红柿2', '辣椒2']
				},
				{
					title: '3号楼',
					list: ['盖饭3', '大白菜3', '土豆3', '西红柿3', '辣椒3']
				},
				{
					title: '菜单4',
					list: ['盖饭4', '大白菜4', '土豆4', '西红柿4', '辣椒4']
				},
				{
					title: '菜单5',
					list: ['盖饭5', '大白菜5', '土豆5', '西红柿5', '辣椒5']
				},
				{
					title: '菜单6',
					list: ['盖饭6', '大白菜6', '土豆6', '西红柿6', '辣椒6']
				},
				{
					title: '菜单7',
					list: ['盖饭7', '大白菜7', '土豆7', '西红柿7', '辣椒7']
				},
				{
					title: '菜单8',
					list: ['盖饭8', '大白菜8', '土豆8', '西红柿8', '辣椒8']
				},
				{
					title: '菜单9',
					list: ['盖饭9', '大白菜9', '土豆9', '西红柿9', '辣椒9']
				},
				{
					title: '菜单10',
					list: ['盖饭10', '大白菜10', '土豆10', '西红柿10', '辣椒10']
				},
				{
					title: '菜单11',
					list: ['盖饭11', '大白菜11', '土豆11', '西红柿11', '辣椒11']
				},
				{
					title: '菜单12',
					list: ['盖饭12', '大白菜12', '土豆12', '西红柿12', '辣椒12']
				},
				{
					title: '菜单13',
					list: ['盖饭13', '大白菜13', '土豆13', '西红柿13', '辣椒13']
				}
			],
			windowHeight: '0px',
			clickId: '',
			clickToId: '',
			currentNum: 0,
			topList: [],
			isLeftClick: false
		};
	},
	methods: {
		setId(index) {
			this.clickId = 'po' + index;
			this.isLeftClick = true;
			this.currentNum = index;
		},
		scroll(e) {
			if (this.isLeftClick) {
				this.isLeftClick = false;
				return;
			}
			let scrollTop = e.target.scrollTop;
			for (let i = 0; i < this.topList.length; i++) {
				let h1 = this.topList[i];
				let h2 = this.topList[i + 1];
				if (scrollTop >= h1 && scrollTop < h2) {
					this.currentNum = i;
					this.clickToId = 'to' + i;
				}
				//解决滚动到最后选项左侧不会选中
				let length = this.topList.length;
				if (scrollTop >= this.topList[length - 1]) {
					this.currentNum = length - 1;
					this.clickToId = 'to' + length - 1;
				}
			}
		},
		getNodesInfo() {
		//获取节点为.right_title距离顶部的距离，返回值放在数组中
			const query = uni.createSelectorQuery().in(this);
			query
				.selectAll('.right_title')
				.boundingClientRect()
				.exec(res => {
					console.log(res);
					let nodes = res[0];
					let rel = [];
					nodes.map(item => {
						rel.push(item.top);
					});
					console.log(rel);
					this.topList = rel;
				});
		}
	},
	onLoad() {
		let _that = this;
		uni.getSystemInfo({
			success: function(res) {
				_that.windowHeight = res.windowHeight + 'px';
			}
		});
		this.getNodesInfo();
	}
};
</script>

<style lang="less">
.ld {
	display: flex;
	.left {
		.title {
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			color: #000000;
		}
		
		.inactive{
			padding-left: 10upx;
			width: 120upx;
			background-color: #ECECEC;
			border-right: 1rpx solid blue;
		}
		.active {
			padding-left: 10upx;
			width: 120upx;
			background-color: #FFFFFF;
			color: #333333;
		}
	}

	.right {
		flex: 1;

		.title {
			color: #dd524d;
			padding: 20upx;
			font-weight: 700;
		}

		.item {
			padding-left: 20upx;
			display: inline-block;
			height: 350upx;
		}
	}
}
</style>
